<!DOCTYPE html>
<html>
 <head>
  <script src="webglbezier.js" type="text/javascript"></script>
  <script type="text/javascript">
    var zoom = 1;
    
    function drawBezier(){
        var bezier = new WebGLBezier();
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        var canvasHeight, canvasWidth;
        var tmp;
        var curveCount = 3;
        
        canvasHeight = canvas.height;
        canvasWidth = canvas.width;
        context.imageSmoothingEnabled = true;
        
        context.clearRect(0, 0, canvasWidth, canvasHeight);
    
        var p1  = new Object;
        var p2  = new Object;
        var p3  = new Object;
        var p4  = new Object;
        var i;
        
    p1.x = -50.0;
    p1.y =   0.0;
    p1.z =   0.0;

    p2.x = -100.0;
    p2.y =  0.0;
    p2.z = -50.0;

    p3.x =  10.0;
    p3.y =  0.0;
    p3.z = -50.0;

    p4.x =  50.0;
    p4.y =   0.0;
    p4.z =   0.0;
        
        bezier.setPoints_as_Object(new Array(p1, p2, p3, p4));
        kurvenwerte = bezier.getBezierKurve_as_Object(100);
        
    p1.x =   0.0;
    p1.y =   0.0;
    p1.z =  75.0;

    p2.x = -60.0;
    p2.y =   0.0;
    p2.z =  70.0;

    p3.x = -20.0;
    p3.y =   0.0;
    p3.z =  50.0;

    p4.x = -50.0;
    p4.y =   0.0;
    p4.z =   0.0;
        
        bezier.setPoints_as_Object(new Array(p1, p2, p3, p4));
        tmp = bezier.getBezierKurve_as_Object(100);
        for(i = 0; i<100; i++) kurvenwerte.push(tmp[i]);
        
    p1.x =  50.0;
    p1.y =   0.0;
    p1.z =   0.0;

    p2.x =  70.0;
    p2.y =   0.0;
    p2.z =  50.0;

    p3.x =  50.0;
    p3.y =   0.0;
    p3.z =  70.0;

    p4.x =   0.0;
    p4.y =   0.0;
    p4.z =  75.0;              

        bezier.setPoints_as_Object(new Array(p1, p2, p3, p4));
        tmp = bezier.getBezierKurve_as_Object(100);
        for(i = 0; i<100; i++) kurvenwerte.push(tmp[i]);        
        

        context.fillStyle = "#000000";
        context.lineWidth = 1;
        context.moveTo(0, canvasHeight/2);
        context.lineTo(canvasWidth, canvasHeight/2);
        context.stroke();
        context.moveTo(canvasWidth/2, 0);
        context.lineTo(canvasWidth/2, canvasHeight);
        context.stroke();
        
        for(i=-1*canvasWidth/2; i<=canvasWidth/2; i+=25){
            if(i!=0)
                context.fillText(i, i*zoom + canvasWidth/2, canvasHeight/2-4);
        }
        for(i=-1*canvasHeight/2; i<=canvasHeight/2; i+=25){
            if(i!=0)
                context.fillText(i, canvasWidth/2+4 , i*zoom + canvasHeight/2);
        }
        
        context.fillStyle = "#FF0000";        
        for(i=0; i<curveCount*100; i++){
//             document.getElementById("mydiv").innerHTML += kurvenwerte[i].x + ";" + kurvenwerte[i].z + "<br />";
            x1 = zoom * kurvenwerte[i].x  + canvasWidth/2;
            y1 = zoom *  kurvenwerte[i].z  + canvasHeight/2;
            context.fillRect(x1-1, y1-1, 3, 3);
        }
    }
    
    function change(event){
        zoom = document.getElementById("ranger").value;
        drawBezier(); 
    }
  </script>
 </head>
 <body onload="change();">
    Zoom: <input type="range" min="1" max="10" value="3" steps="1" onchange="change();" id="ranger" />
	<br />
	<a href="./index.html">index.html</a>
    <canvas id="mycanvas" width="800" height="600">
 </body>
</html>